<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item> <span class="headerSpan"></span>秒杀时间段列表<el-button size="small" icon="el-icon-refresh">刷新</el-button></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableCont">
      <!-- 表格区域 -->
      <el-table style="width: 100%" :data="BrandList">
        <el-table-column>
          <template slot="header">
            <div class="tableHeader">
              <div><i class="el-icon-s-unfold"></i> <span>数据列表</span></div>
              <div class="ringhtHeader">
                <el-button @click="dialogFormVisible = true">添加</el-button>
              </div>
            </div>
          </template>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="编号"> </el-table-column>
          <el-table-column prop="timeTitle" label="秒杀时段名称"> </el-table-column>
          <el-table-column prop="startTime" label="每日开始时间"> </el-table-column>
          <el-table-column prop="endTime" label="每日结束时间"> </el-table-column>
          <el-table-column prop="showOrDis" label="启用"> </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <div class="cz">
                <a href="javascript:;" @click="$router.push('/goods/brand/add?id=' + scope.row.id)">编辑</a>
                <a href="javascript:;" @click="deleteBrand(scope.row.id)">删除</a>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryuserInfo.size"
        :page-size="queryuserInfo.page"
        layout="total,  prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加时间段 -->
    <el-dialog title="添加时间段" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="秒杀时间段名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="每日开始时间" :label-width="formLabelWidth">
          <el-input v-model="form.startTime" placeholder="请选择时间" suffix-icon="el-icon-time" clearable></el-input>
        </el-form-item>
        <el-form-item label="每日结束时间" :label-width="formLabelWidth">
          <el-input v-model="form.endTime" placeholder="请选择时间" suffix-icon="el-icon-time" clearable></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-switch v-model="form.onOrOff"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryuserInfo: {
        page: 1,
        size: 10,
        name: '',
        letter: 'V'
      },
      sort: '',
      packFindIcon: 'el-icon-arrow-down',
      flagShow: true,
      BrandList: [],
      total: 10,
      dialogFormVisible: false,
      form: {
        title: '',
        startTime: '',
        endTime: '',
        onOrOff: true
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    shiftGoods(value) {
      this.rawForm = value
      this.dialogVisible = true
    }
  },
  created() {
    this.getBrandData()
  }
}
</script>
<style lang="less" scoped>
.findHeader {
  width: 100%;
  height: 50px;
  background-color: #f3f3f3;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  color: #666666;
  border: 1px solid #eee;
  i {
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
  }
  div {
    line-height: 50px;
    font-size: 12px;
  }
}
.ringhtHeader {
  .el-button {
    height: 30px;
    line-height: 0;
  }
  .el-pagination {
    display: inline-block;
    float: none;
    transform: translateY(-3px);
  }
  .el-select {
    transform: translateY(-2px);
  }
}
.findCont {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  border: 1px solid #eee;
  line-height: 70px;
  font-size: 14px;
  color: #666;
  padding-left: 40px;
  .el-input {
    display: inline-block;
    width: 200px;
  }
}
.el-table {
  margin-top: 20px;
  .tableHeader {
    display: flex;
    justify-content: space-between;
  }
  .cz {
    a:nth-child(2) {
      padding-left: 20px;
    }
  }
  .correlation {
    span {
      color: #20a5ff;
    }
    span:hover {
      text-decoration: underline;
    }
  }
}
</style>
